<template>
  <div class="map-img">
    <div class="two-head">
      <div class="head-item">
        <div class="head-desc">计划总投资</div>
        <div class="head-num">
          <div class="head-num-item"
            v-for="(item, index) in allMoney"
            :key="index">
            {{item}}
          </div>
          <div class="unit">亿元</div>
        </div>
      </div>

      <div class="head-item">
        <div class="head-desc">当前投资额</div>
        <div class="head-num">
          <div class="head-num-item"
            v-for="(item, index) in nowMoney"
            :key="index">
            {{item}}
          </div>
          <div class="unit">亿元</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cockpitApi from '@/api/investment/cockpit'

export default {
  name: "mapImg",
  props: ['times'],
  watch: {
    times: {
      handler(newVal) {
        this.paramsObj.searchBeginTime = newVal && newVal[0]
        this.paramsObj.searchEndTime = newVal && newVal[1]

        this.initOptions()
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      paramsObj: {
        searchBeginTime: "",
        searchEndTime: ""
      },
      allMoney: ['','','',''],
      nowMoney: ['','','','']
    }
  },
  methods: {
    async initOptions() {
      const {data: {content: allMoney}} = await cockpitApi.getInvestmentPlan(this.paramsObj)
      
      this.allMoney = String(parseInt(allMoney || 0)).padStart(4,0).split('')

      const {data: {content: nowMoney}} = await cockpitApi.getInvestmentFixed(this.paramsObj)
      
      this.nowMoney = String(parseInt(nowMoney || 0)).padStart(4,0).split('')
    }
  }
}
</script>

<style lang="scss" scoped>
.map-img {
  width: 100%;
  height: 100%;
  background: url('~@/assets/cockpit/map-bg.png') no-repeat;
  background-size: 36.51vw 28.073vw;
  background-position: center bottom;
  .two-head {
    display: flex;
    justify-content: space-around;
    .head-item {
      width: 10.208vw;
    }
    .head-desc {
      width: 10.208vw;
      height: 1.979vw;
      line-height: 1.979vw;
      text-align: center;
      font-size: 0.938vw;
      color: #DFECFB;
      background: url('~@/assets/cockpit/map-title.png') no-repeat;
      background-size: 10.208vw 1.979vw;
      margin-bottom: 0.469vw;
    }
    .head-num {
      display: flex;
      align-items: center;
      .head-num-item {
        width: 1.979vw;
        height: 2.5vw;
        line-height: 2.5vw;
        text-align: center;
        margin-right: 0.208vw;
        background: url('~@/assets/cockpit/num-bg.png') no-repeat;
        background-size: 100%;
        font-weight: 600;
        font-size: 1.719vw;
        color: #6ef5f0;
      }
    }
  }
}
</style>
